<template>
	<view class="game-rules-container">
		<view class="bg">
			<lexiconNavVue title="游戏规则" />
			<!-- title -->
			<view class="level_item level_1">
				<view style="width:100%;display:flex;flex-direction: row;align-items: center;overflow: hidden;">
					<view style="width: 46px;">
						<image mode="widthFix" style="width: 100%;overflow: hidden;"
							:src="'/static/image/app/icon-'+ info.alias +'.png'"></image>
					</view>
					<view class=""
						style="text-align: left;flex: 1;white-space: nowrap;overflow: hidden;padding-left: 10px;">
						<view class="title111">{{info.name}}游戏规则</view>
						<view class="title222">Rules of {{info.en_name}}</view>
					</view>
				</view>
			</view>
			<view class="p-20">
				<!-- 视频+规则 -->
				<block v-if="current === 0">
				<!-- video -->
				<!-- :src="require('../../static/image/app/rules/'+ info.alias +'.mp4')"  -->
					<view id="ruleVideo" :style="'height: ' + height + 'px;'" v-if="info.tag !== '汉英'">
						<video class="video" v-if="info.alias"
						:src="info.video_url"
						:poster="require('../../static/image/app/rules/poster_'+ info.alias +'.png')" 
						autoplay
						></video>
					</view>
						<!-- autoplay -->
					
					<!-- 游戏规则文案 -->
					<scroll-view :style="'height: ' + sHeight + 'px;'" scroll-y>
						<text class="remark">{{info.remark}}</text>
					</scroll-view>
				</block>
				<!-- gif -->
				<block v-if="info.remark_list">
					<scroll-view scroll-y :style="'height: ' + sHeight2 + 'px;'">
						<view v-for="(item, i) in info.remark_list" :key="i" v-show="i === current-1">
							<view class="gif-container" :style="'height: ' + gHeight + 'px;'">
								<image class="loading" src="../../static/image/app/rules/loading.gif" mode="widthFix"></image>
								<view class="gif" :style="'height: ' + gHeight + 'px;'">
									<image class="img" :src="item.img" mode="heightFix"></image>
								</view>
							</view>
							<view class="remark2">
								<text class="remark">{{ item.content }}</text>
							</view>
						</view>
					</scroll-view>
				</block>
				
				<view class="btn-group">
					<view class="btn btn1" v-if="current > 0" @click="prevFn">上一步<view class="btn-en">Prev</view></view>
					<view class="btn btn2" v-if="current < total" @click="nextFn">下一步<view class="btn-en">Next</view></view>
					<view class="btn btn2" v-if="current == total" @click="backFn">开始游戏<view class="btn-en">Start</view></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gameId: '',
				info: {},
				current: 0,
				total: 0,
				device_type: '',
				height: 0, // 视频高度
				sHeight: 0,
				gHeight: 0,
				sHeight2: 0
			};
		},
		onReady() {
			// 
			uni.createSelectorQuery().select('#ruleVideo').boundingClientRect(rect => {
				console.log(rect)
				this.height = rect.width * 9 / 16
				this.sHeight = uni.getSystemInfoSync().windowHeight - rect.bottom - this.height - 100
			}).exec();
			
			uni.createSelectorQuery().select('.level_item').boundingClientRect(rect => {
					console.log(rect)
					if (rect) {
						this.gHeight = uni.getSystemInfoSync().windowHeight - rect.bottom - 200
						this.sHeight2 = uni.getSystemInfoSync().windowHeight - rect.bottom - 100
					}
			}).exec();
		},
		onLoad(options) {
			this.gameId = options.id
			this.device_type = uni.getSystemInfoSync().platform
			this.getInfo()
			
			
		},
		methods: {
			getInfo() {
				this.$http.getGameRules({id: this.gameId, device_type: this.device_type}).then(res => {
					this.info = res.data
					this.current = 0
					this.total = this.info.remark_list.length
				})
			},
			nextFn() {
				this.current++;
			},
			prevFn() {
				this.current--
			},
			backFn() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less">
.game-rules-container{
	background-image: url(/static/image/app/gameBg.png);
	background-size: 100% auto;
	background-position: top left;
	background-repeat: no-repeat;
	width: 100%;
	height: 100vh;
	background-size: 100% 100%;
	overflow: hidden;
	.bg{
		padding-bottom: 100px;
	}
}
.level_1 {
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px 20px;
}
.title111 {
	color: #fff;
	font-size: 26px;
	font-family: hzgb;
	margin-bottom: 6px;
}

.title222 {
	color: #fff;
	font-size: 14px;
	font-family: hzgb;
}
#ruleVideo{
	width: 100%;
	margin-bottom: 20px;
}
.video{
	width: 100%;
	height: 100%;
}
.remark{
	font-size: 16px;
	color: black;
	text-align: left;
	padding: 10px 0;
	color: #fff;
	line-height: 28px;
}
.p-20{
	padding: 0 20px;
}
.btn-group{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: 40px;
	padding-top: 20px;
	background: linear-gradient(to top, #130e00, #1c170d);
}

.gif-container{
	position: relative;
	height: 500px;
	margin-bottom: 20px;
	
	.loading{
		width: 200px;
		position: absolute;
		top: 100px;
		z-index: 1;
		display: block;
		margin: 0 auto;
	}
	.gif{
		width: 100%;
		height: 500px;
		margin: 0 auto;
		text-align: center;
		position: absolute;
		top: 0;
		z-index: 10;
		.img{
			height: 100%;
		}
	}
}
.remark2{
	height: 200px;
}
</style>
